<template>
  <a-spin ref="spin" :loading="tableLoading" style="height: 100%">
    <div ref="dropdown" class="dropdown"></div>
    <a-table
      v-table-height
      :columns="(columns as TableColumnData[])"
      :data="filtedTableData"
      :scroll="{ x: '100%', y: '100%' }"
      :pagination="{
        showTotal: true,
        showPageSize: true,
        showJumper: true,
        pageSizeOptions: [10, 20, 50],
      }"
      :bordered="false"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
    >
      <template #empty>
        <div class="list-empty" :style="'height:' + tableHeight + 'px'">
          <div class="empty-box">
            <img src="@/assets/images/file-manager/empty-file.png" />
            <div class="text">没有任何文件或文件夹</div>
          </div>
        </div>
      </template>
      <template #name="record">
        <div class="table-name">
          <img
            v-if="record.record.isFileOrFolder === 1"
            src="@/assets/images/file-manager/file.png"
            class="table-file-name-img"
          />
          <img
            v-else
            src="@/assets/images/file-manager/folder2.png"
            class="table-file-name-img"
          />
          <a-input
            v-if="renameIndex === record.rowIndex"
            v-focus
            allow-clear
            @blur="renameRequest"
          />
          <div v-else-if="record.record.isFileOrFolder === 1">{{
            record.record.name
          }}</div>
          <div v-else class="folder-name" @click="folderClick(record.record)">{{
            record.record.name
          }}</div>
        </div>
      </template>
      <template #version="record">
        <a-tag
          v-if="record.record.version"
          class="tag"
          bordered
          color="cyan"
          @click="showVersions(record.record)"
          >v{{ record.record.version }}</a-tag
        >
      </template>
      <template #optionalTitle>
        <div class="optional-title-icon">
          <icon-settings :size="12" />
        </div>
      </template>
      <template #optional="record">
        <file-table-buttons
          :row-data="record.record"
          :row-index="record.rowIndex"
          :popup-container="dropdown"
        ></file-table-buttons>
      </template>
    </a-table>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { storeToRefs } from 'pinia';
  import useFileManageStore from '@/store/modules/file-manage/index';
  import { TableColumnData } from '@arco-design/web-vue';
  import { FileAndFolderMessage } from '@/api/tree-folder';
  import FileTableButtons from './buttons-table-file.vue';
  import { showVersions, renameRequest } from '../hooks/dropdow-events';
  import columns from '../json/table-column.json';

  const store = useFileManageStore();
  const { renameIndex, tableData, tableLoading, filterForm } =
    storeToRefs(store);

  // dropdown容器
  const dropdown = ref();

  // 过滤后的tableData
  const filtedTableData = computed(() => {
    const newTableData = tableData.value.filter((item) => {
      return item.name?.includes(filterForm.value.name);
    });
    return newTableData;
  });

  // 排列顺序改变
  const sorterChange = (
    a: FileAndFolderMessage,
    b: FileAndFolderMessage,
    extra: any
  ) => {
    let result = 0;
    if (a.isFileOrFolder === b.isFileOrFolder) {
      result =
        (a.name?.localeCompare(b?.name || '') || 0) *
        (extra.direction === 'ascend' ? 1 : -1);
    } else if (a.isFileOrFolder === 0) {
      result = -1;
    } else {
      result = 1;
    }
    return result;
  };
  const nameColumn: any = columns[0];
  nameColumn.sortable.sorter = sorterChange;

  // 自动聚焦指令
  const vFocus = {
    mounted(el: Element) {
      const input = el.getElementsByTagName('input')[0];
      input.focus();
    },
  };

  const tableHeight = ref(0);
  // table根据父组件计算空白高度
  const vTableHeight = {
    mounted(el: Element) {
      tableHeight.value = Math.max(
        (el.parentElement?.offsetHeight || 0) - 59,
        0
      );
    },
  };

  // 文件夹点击事件
  const folderClick = (row: FileAndFolderMessage) => {
    store.setCurrentFolder(row);
  };
</script>

<style lang="less" scoped>
  .table-file-name-img {
    width: 12px;
    margin-right: 8px;
  }
  .table-name {
    display: flex;
    align-items: center;
  }
  .optional-title-icon {
    width: 46px;
    text-align: center;
  }
  .dropdown {
    position: absolute;
    :deep(.arco-dropdown-list-wrapper) {
      max-height: none;
    }
  }
  :deep(.arco-tag-size-medium) {
    line-height: 24px;
  }
  .tag {
    cursor: pointer;
  }
  .folder-name {
    cursor: pointer;
    color: rgb(var(--primary-6));
  }
  .list-empty {
    display: flex;
    align-items: center;
    .empty-box {
      width: 100%;
      text-align: center;
      height: 400px;
      .text {
        width: 100%;
        text-align: center;
        margin-top: -80px;
      }
    }
  }
</style>
